﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nyan Cat Everywhere</title>
    <link type="text/css" rel="stylesheet" href="css/global.css">
    <link type="text/css" rel="stylesheet" href="css/roboto.css">
    <style>
        @media only screen and (min-width: 0) {
            html {
                font-size: 14px;
            }
        }
        @media only screen and (min-width: 992px) {
            html {
                font-size: 14.5px;
            }
        }
        @media only screen and (min-width: 1200px) {
            html {
                font-size: 15px;
            }
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
        }
        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            font-weight: inherit;
        }
        h1 {
            font-size: 4.2rem;
            line-height: 4.62rem;
            margin: 2.1rem 0 1.68rem 0;
        }
        h2 {
            font-size: 3.56rem;
            line-height: 3.916rem;
            margin: 1.78rem 0 1.424rem 0;
        }
        h3 {
            font-size: 2.92rem;
            line-height: 3.212rem;
            margin: 1.46rem 0 1.168rem 0;
        }
        h4 {
            font-size: 2.28rem;
            line-height: 2.508rem;
            margin: 1.14rem 0 0.912rem 0;
        }
        h5 {
            font-size: 1.64rem;
            line-height: 1.804rem;
            margin: 0.82rem 0 0.656rem 0;
        }
        h6 {
            font-size: 1rem;
            line-height: 1.1rem;
            margin: 0.5rem 0 0.4rem 0;
        }
        body {
            text-align: center;
            background-color: midnightblue;
            color: white;
        }
        #logo-img {
            position: absolute;
            top: 0px;
            left: 0px;
            transform: rotate(45deg);
            z-index: -1;
            opacity: 0.5;
        }
        .card-page {
            background-color: gainsboro;
            margin-top: 50px;
            margin-bottom: 50px;
            margin-left: 20px;
            margin-right: 20px;
            padding: 6px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .card-img {
            margin: 6px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .card-input {
            margin-right: 6px;
            width: 70%;
            height: 40px;
            font-size: 1.64rem;
        }
        .card-button {
            margin-left: 6px;
            width: 60px;
            height: 40px;
            font-size: 1.64rem;
        }
        .card-tip {
            color: black;
            font-size: 1.4rem;
        }
        #duoshuo-background {
            background-color: lavender;
            padding: 20px;
        }
        @media (min-width: 1000px) {
            .card-page {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
            }
            #duoshuo-content {
                width: 960px;
                margin-left: auto;
                margin-right: auto;
            }
        }
    </style>
</head>
<body>

    <a href="https://github.com/TakWolf/NyanEverywhere" target="_blank">
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png">
    </a>

    <img id="logo-img" src="img/nyancat.gif">
    <h1>~ Nyan Cat Everywhere ~</h1>
    <h4>nyan nyan nyan nyan nyan nyan</h4>

    <div class="card-page">
        <img class="card-img" src="img/screenshot-nyancat.png">
        <br>
        <span class="card-tip">Input a URL like <a href="http://nyan.takwolf.com" target="_blank">http://nyan.takwolf.com</a></span>
        <p>
            <input id="go-nyancat" class="card-input" type="text" value="http://nyan.takwolf.com">
            <input class="card-button" type="button" value="GO" onclick="go('go-nyancat')">
        </p>
        <br>
    </div>

    <div class="card-page">
        <img class="card-img" src="img/screenshot-christmas.png">
        <br>
        <span class="card-tip">Input a URL like <a href="http://nyan.takwolf.com" target="_blank">http://nyan.takwolf.com</a></span>
        <p>
            <input id="go-christmas" class="card-input" type="text" value="http://nyan.takwolf.com">
            <input class="card-button" type="button" value="GO" onclick="go('go-christmas')">
        </p>
        <br>
    </div>

    <div class="card-page">
        <img class="card-img" src="img/screenshot-sakura.png">
        <br>
        <span class="card-tip">Input a URL like <a href="http://nyan.takwolf.com" target="_blank">http://nyan.takwolf.com</a></span>
        <p>
            <input id="go-sakura" class="card-input" type="text" value="http://nyan.takwolf.com">
            <input class="card-button" type="button" value="GO" onclick="go('go-sakura')">
        </p>
        <br>
    </div>

    <script>
        function go(id) {
            var input = document.getElementById(id);
            window.open('http://nyan.takwolf.com/' + id.substr(3) + "#" + input.value);
        }
    </script>

    <!-- duoshuo -->
    <div id="duoshuo-background">
        <div id="duoshuo-content">
            <div class="ds-thread" data-thread-key="nyan" data-title="Nyan" data-url="http://nyan.takwolf.com"></div>
        </div>
    </div>

    <!-- duoshuo -->
    <script>
        var duoshuoQuery = {short_name:"nyan"};
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0]
            || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>

</body>
</html>
